<template>
  <div class="user-item" :class="{ 'user-item--active': isActive }" @click="handleClick">
    <div class="user-item__avatar">
      <img :src="user.avatar" :alt="user.name">
      <div class="user-item__status" :class="'user-item__status--' + user.status"></div>
    </div>
    <div class="user-item__content">
      <div class="user-item__name">{{ user.name }}</div>
      <div class="user-item__message">{{ user.last_chat_msg }}</div>
    </div>
    <div class="user-item__meta">
      <div class="user-item__time">{{ formatTime(user.last_chat_time) }}</div>
      <div v-if="user.unreadCount" class="user-item__badge">{{ user.unread_count }}</div>
    </div>
  </div>
</template>

<script>
import { formatTime } from '@/utils/time'

export default {
  name: 'UserItem',
  
  props: {
    user: {
      type: Object,
      required: true
    },
    isActive: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    formatTime,
    handleClick() {
      this.$emit('click', this.user)
    }
  }
}
</script>

<style lang="less" scoped>
.user-item {
  display: flex;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s;

  &:hover {
    background-color: #f5f5f5;
  }

  &--active {
    background-color: #e6f7ff;
  }

  &__avatar {
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  &__status {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;

    &--online {
      background-color: #52c41a;
    }

    &--offline {
      background-color: #d9d9d9;
    }

    &--busy {
      background-color: #ff4d4f;
    }
  }

  &__content {
    flex: 1;
    min-width: 0;
  }

  &__name {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    margin-bottom: 4px;
  }

  &__message {
    font-size: 14px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__meta {
    text-align: right;
    margin-left: 12px;
  }

  &__time {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
  }

  &__badge {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    background-color: #ff4d4f;
    color: #fff;
    border-radius: 8px;
  }
}
</style>
